<!DOCTYPE html>
<html>
<head>
    <title>Generated content in semi-transparent inline-block elements</title>
    <style type="text/css">
        body {
            padding: 60px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            line-height: 1.2;
            color: #000000;
        }
        .balloon {
            display: inline-block;
            width: 100px;
            height: 100px;
            font-size: 3em;
            line-height: 100px;
            text-align: center;
            background: #999999;
            color: #FFFFFF;
            opacity: 0.5;
            position: relative;
        }
        .balloon::after {
            content: "";
            width: 20px;
            height: 50px;
            background: #999999;
            position: absolute;
            left: 0;
            bottom: -50px;
        }
    </style>
</head>
<body>
    <div class="balloon">99</div>
</body>
</html>